<template>
  <div class="content-wrap">
    <add-edit ref="addEdit"></add-edit>
    <operate-area ref="operateArea" :btn-text="btnText" :btn-list="btnList" :placeholder-text="'表名'" :search-value.sync="search"
      @add="add" @deletes="del" @search="getDataList" @reset="reset">
        <el-col :span="7">
          <el-form-item label="表名">
            <el-input v-model="queryParam.tableName" />
          </el-form-item>
        </el-col>
    </operate-area>
    <el-table v-loading="tLoading" :data="tableData" @selection-change="handleSelectionChange" @row-click="edit">
      <el-table-column type="selection" width="60"></el-table-column>
      <el-table-column :show-overflow-tooltip="true" label="#" type="index" width="60">
        <template slot-scope="scope">
          <span>{{ scope.$index + (pageNo - 1) * pageSize + 1 }}</span>
        </template>
      </el-table-column>
      <el-table-column label="表名" min-width="180" prop="tableName" :show-overflow-tooltip="true"></el-table-column>
      <el-table-column label="说明" min-width="240" prop="comment" :show-overflow-tooltip="true"></el-table-column>
      <el-table-column label="表单类型" min-width="120" prop="relationTypeStr" :show-overflow-tooltip="true"></el-table-column>
      <el-table-column label="类名" min-width="120" prop="className" :show-overflow-tooltip="true"></el-table-column>
      <el-table-column label="操作" fixed="right" width="60">
        <template slot-scope="{row}">
          <div @click.stop="">
            <el-dropdown>
              <span class="el-dropdown-link">
                <i class="iconfont iconicon_more mr-2"></i>
              </span>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item @click.native="downLoad(row.id)">生成代码</el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </div>
        </template>
      </el-table-column>
    </el-table>
    <!--分页组件-->
    <pagination :page.sync="pageNo" :total="total" @pagination="getDataList" />
  </div>
</template>

<script>
  import addEdit from './addEdit'
  import {
    getDataList,
    genCode,
    deletes
  } from '@/api/adminPage/sysAutoCode'

  import SysDict from '@/components/BaseSysDict/sysdict-select'
  import Pagination from '@/components/Pagination/index'
  import OperateArea from '@/components/OperateArea/indexNew'

  export default {
    name: 'AutoCode',
    components: {
      addEdit,
      Pagination,
      OperateArea,
      SysDict
    },
    data() {
      return {
        pageNo: 1,
        pageSize: 10,
        total: 0,
        tableData: [],
        tLoading: false,
        btnText: {
          add: '添加'
        },
        search: undefined,
        btnList: ['add', 'del'],
        multipleSelection: undefined,
        queryParam: {
          tableName: null

        }
      }
    },
    computed: {},
    created() {
      this.getDataList()
    },
    methods: {
      handleSelectionChange(val) {
        this.singleUser = val
        if (val.length) {
          this.$refs.operateArea.$children[1].selectIndex = val.length
        } else {
          this.$refs.operateArea.$children[1].selectIndex = -1
        }
        this.multipleSelection = val
      },
      downLoad(id) {
        let a = document.createElement('a')
        a.href = process.env.VUE_APP_BASE_API + '/plm-sys/api/sysAutocode/genCode?codeId=' + id
        a.click()
      },
      add() {
        this.$refs.addEdit.add()
      },
      del() {
        const ids = []
        this.multipleSelection.forEach((item, index) => {
          ids.push(item.id)
        })
        let _this = this
        this.tLoading = true
        deletes(ids).then(res => {
          _this.$message({
            message: '删除成功',
            type: 'success'
          })
          _this.tLoading = false
          _this.getDataList()

        })
      },
      edit(item) {
        this.$refs.addEdit.edit(item.id)
      },
      getDataList() {
        const params = {
          pageNo: this.pageNo > 0 ? this.pageNo : 1,
          pageSize: this.pageSize,
          t:  this.queryParam
        }
        this.tLoading = true
        getDataList(params).then(res => {
          this.tLoading = false
          const records = res.result.records
          this.tableData = records
          this.total = res.result.total
        })
      },
      getOperateIds() {
        const ids = []
        this.multipleSelection.forEach((item, index) => {
          ids.push(item.id)
        })
        return ids
      },
      reset() {
        this.queryParam.tableName=null;
      }
    }
  }
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
  @import '~@/assets/styles/variables';
  @import '~@/assets/styles/user-drawer.scss';

  .cup {
    cursor: pointer;
  }

  ::v-deep .el-table tbody tr:hover>td {
    cursor: pointer;
  }

  ::v-deep .user-detail-tabs-wrap {
    height: calc(100vh - 67px);
    border: none;

    .detail-title {
      margin-bottom: 25px;
      color: $fontColor;
    }

    .el-tabs__header {
      margin-right: 0;
      background: $background;
    }

    .el-tabs__item {
      padding: 0 13px;
      height: 59px;
      line-height: 59px;
    }

    .el-tabs__content {
      padding: 16px;
    }
  }
</style>
